<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>电子音乐</title>  
    <style>  

        /*============背景============*/
        html, body {  
            height: 100%;  
            margin: 0;  
            padding: 0;  
        }  
  
        body {  
            background: linear-gradient(to bottom right, #d5d5d5, #68818f,#076585);  
            background-size: 400% 400%;  
            animation: gradient 15s ease infinite;  
        }  
  
        @keyframes gradient {  
            0% {  
                background-position: 0% 0%;  
            }  
            50% {  
                background-position: 100% 100%;  
            }  
            100% {  
                background-position: 0% 0%;  
            }  
        }  
        /*============背景============*/
  
        /*=============导航栏=============*/  
        .div1 {  
            width: 20px;  
            height: 100vh; 
            background-color: rgb(67, 67, 67);  
            overflow: hidden;  
            box-shadow: 5px 1px 8px rgba(69, 69, 69, 0.771);  
            position: relative;  
            transition: width 1s ease;  
        }  
  
        .div1:hover {  
            width: 150px;  
        }  
  
        ul {  
            list-style-type: none;  
            padding: 0;  
            margin: 0;  
            padding-bottom: 50px;  
        }  
  
        
        li a {  
            display: block;  
            text-decoration: none;  
            color: rgb(245, 245, 220);  
            text-align: center;  
            padding: 25px;
            padding-top: 40px;  
            transition: font-size 0.8s ease;  
        }  
  
        li a:hover {  
            background-color: rgb(0, 0, 0);  
            box-shadow: 3px 3px 3px;  
            font-size: 22px;  
        }  
  
        .arrow {  
            color: antiquewhite;  
            position: absolute;  
            bottom: 20px;  
            left: 50%;  
            transform: translateX(-50%);  
            pointer-events: none;  
        }  

        button {
            color: rgb(162, 153, 141);
            width: 20%;
            padding: 0.1%;
            margin-left: 19%;
            border: 3px solid rgb(46, 46, 46);
            border-radius: 5em;
            font-size: x-large;
            background-color: rgba(29, 29, 29, 0.407);
        }
        
        button:hover {
            color: antiquewhite;
            box-shadow:3px 3px 3px  #e6e5cb;
        }

        /*=============导航栏=============*/  

        /*=============内容栏=============*/

        .flex-container {
            display: flex;
            width: 91%;
            height: 100%;
            left: 5%;
            background-color: rgba(240, 248, 255, 0.23);
            position: absolute;
            flex-wrap: wrap;
        }

        .flex-item1 {
            width: 26%;
            height: 29%;
            margin: 1%;
            padding: 0.8%;
            border-radius: 5%;
            background-color: rgba(250, 235, 215, 0.266);
        }

        .flex-item2 {
            width: 65%;
            height: 5%;
            margin: 1%;
            padding: 0.8%;
            border-radius: 5em;
            background-color: rgba(29, 29, 29, 0.558);
        }

        .flex-item3 {
            width: 26%;
            height: 58%;
            margin: 1%;
            padding: 0.8%;
            border-radius: 5%;
            background-color: rgba(250, 235, 215, 0.005);
        }

        .content-box {
            position: absolute;
            left: 29.6%;
            top: 11%;
            width: 61.6%;
            height: 76.5%;
            margin: 1%;
            padding: 3%;
            border-radius: 5%;
            overflow: auto;
            background-color: rgba(250, 235, 215, 0.558);
        }

        .content-box p {  
            text-indent: 2em;  
            font-size: large;
        }

        .option1 {
            display: flex;
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
            text-align: center;
        }

        .option2 {
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            margin-left: 40px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option3 {
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option4 {
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            margin-left: 40px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option5 {
            width: 320px;
            height: 60px;
            margin: 5px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option1,  
        .option2,  
        .option3,  
        .option4,  
        .option5 {  
            transition: transform 0.3s ease;  
        } 

        .option1:hover,
        .option3:hover,
        .option5:hover {
            transform: rotate(-5deg) scale(1.2);
        }

        .option2:hover,
        .option4:hover {
            transform: rotate(7deg) scale(1.2);
        }

        img {
            width: 310px;
            height: 54px;   
            padding-top: 3px;
            padding-left: 4px;
            text-align: center;
            border-radius: 5em;
        }
        
        .word {
            position: absolute;
            top: -1%;
            left: -1%;
            width: 400px;
            height: 300px;
        }
        /*=============内容栏=============*/

        /*------------ 浮 动 -------------*/ 

        @media screen and (max-width:600px) {
            html {
                overflow: auto;
            }

            .word {
                width: 100%;
                top: -40%;
            }

            .flex-item2 {
                width: 91%;
            }

            .flex-container {
                width: 100%;
            }

            .flex-item1 {
                position: absolute;
                top:7%;
                width: 28%;
                height: 22%;
                
            }

            .flex-item3 {
                position:absolute;
                top: -14.5%;
                left: 31%;
                transform: rotate(90deg);
            }

            .content-box {
                position: absolute;
                top: 31%;
                left: 0.5%;
                width: 86%;
                height: 60%;
            }

            .option1,
            .option2,
            .option3,
            .option4,
            .option5 {
                width: 100%;
                height: 6%;
            }

            img {
                width: 90%;
                height: 70%;
            }
        }

        /*------------ 浮 动 -------------*/ 
    </style> 
</head>  
<body>  
    <div class="flex-container">
        <div class="flex-item1"><img class="word" src="./图片/Hard/hardcoer word.png"></div>
        <div class="flex-item2">
            <button onclick="showContent('content1')">初期</button>  
            <button onclick="showContent('content2')">发展</button>
        </div>

        <div class="flex-item3">
            <div class="option1"><a href="https://www.kugou.com/mixsong/acl5xk2a.html?fromsearch=Quicksand"><img src="./图片/Hard/hard1.png"></a></div>
            <div class="option2"><a href="https://www.kugou.com/mixsong/acl5xk2a.html?fromsearch=Quicksand#h7izy22"><img src="./图片/Hard/hard2.png"></a></div>
            <div class="option3"><a href="https://www.kugou.com/mixsong/acl5xk2a.html?fromsearch=Quicksand#h7j5gfb"><img src="./图片/Hard/hard3.png"></a></div>
            <div class="option4"><a href="https://www.kugou.com/mixsong/529bjyd7.html?fromsearch=Ophidian%20-%20The%20Sky%20On%20Fire"><img src="./图片/Hard/hard4.png"></a></div>
            <div class="option5"><a href="https://www.kugou.com/mixsong/223jy706.html?fromsearch=Creep%20Of%20Chaos%20-%20Official%20Anthem"><img src="./图片/Hard/hard5.png"></a></div>
        </div>

        <div class="content-box" id="contentBox">
        </div>
    </div>

    <div class="div1">  
        <ul>  
            <li><a href="./Dubstep.html">Dubstep</a></li>  
            <li><a href="./Trance.html">Trance</a></li>  
            <li><a href="./Synwave.html">Synthwave</a></li>  
            <li><a href="./Hardcore.html">Hardcore</a></li>  
        </ul>  
        <p class="arrow">⇲</p>   
    </div>  
    
    <script>  
        var content1 = '<p>Hardcore的起源可以追溯到20世纪80年代初的英国。当时，电子音乐场景正在经历翻天覆地的变革。在伦敦等城市的地下夜店中，DJ们开始尝试对原有的舞曲音乐进行加速和强化，进而创造出更为激烈和高能的音乐形式，这就是最初的Hardcore音乐。</p><p>Hardcore舞曲的最显著特征是其极快的节奏和强烈的BPM（每分钟节拍数）。这种音乐风格相对于传统舞曲更为强烈，给听众带来更大的冲击力。</p><p>然而，值得注意的是，除了舞曲领域的Hardcore，还有硬核朋克（Hardcore Punk），这是一种起源于20世纪70年代末的朋克摇滚音乐流派。虽然它与Hardcore舞曲在音乐类型和起源上有所不同，但两者都体现了“硬核”这一概念的强烈、直接和反叛的特质。</p><p>总的来说，Hardcore的起源与20世纪80年代初英国电子音乐场景的变革密切相关，是DJ们对传统舞曲进行创新和强化的结果。如需更多信息，建议查阅音乐研究、文化研究等领域的专业书籍。</p>';  
        var content2 = '<p>Hardcore舞曲的起源可以追溯到20世纪80年代初的英国电子音乐场景。在伦敦等城市的地下夜店，DJ们开始通过加速和强化原有的舞曲音乐，创造出更为激烈和高能的音乐形式，这就是最初的Hardcore。</p><p>同时，这一时期也涌现出了许多具有影响力的Hardcore音乐人和团体，如Throbbing Gristle、Coil、SPK、Foetus等，他们利用各类电子乐器，创作出节奏强硬、音色粗粝的工业舞曲，为早期Hardcore的形成奠定了基础。</p><p>1980年代中期，受Front 242影响，EBM（Electronic Body Music）这一集Disco、Funk律动和Minimal、Industrial冰冷特性的音乐风格从Industrial、New Wave浪潮中脱胎而出，并与New Beat、Acid House等舞曲风格相碰撞磨和，成为了早期Hardcore音乐的始作俑者。</p><p>在这个过程中，Hardcore不断吸纳和融合来自各种音乐流派的元素，包括电子、舞曲、鼓和贝斯等，形成了多样化的音乐风格。这种多样性使得Hardcore的音乐更为丰富多彩，吸引了广泛的听众。</p><p>在当今时代，Hardcore音乐依然保持着其独特的魅力和活力。它不仅在电子音乐领域占有一席之地，还逐渐渗透到其他音乐领域和文化场景中。</p>';  
      
        window.onload = function() {  
          showContent('content1');   
        };  
      
        function showContent(contentId) {  
          var contentBox = document.getElementById('contentBox');  
          switch (contentId) {  
            case 'content1':  
              contentBox.innerHTML = content1;  
              break;  
            case 'content2':  
              contentBox.innerHTML = content2;  
              break;  
          }  
        }  
      </script> 
</body>  
</html>